<template>
  <div class="product-list">
    <div class="product-item" v-for="product in products" :key="product.id">
      <img :src="product.image" alt="Product Image" class="product-image" />
      <div class="product-info">
        <h3 class="product-title">{{ product.title }}</h3>
        <p class="product-views">{{ product.views }} 观看</p>
        <p class="product-description">{{ product.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      products: [
        {
          id: 1,
          image: 'path_to_image1.jpg', // 替换为实际图片路径
          title: '康莉品牌年底最终优惠',
          views: 3270,
          description: '小鞋将'
        },
        {
          id: 2,
          image: 'path_to_image2.jpg', // 替换为实际图片路径
          title: '已有9820购买过',
          views: 8436,
          description: '恒玖皮革'
        },
        {
          id: 3,
          image: 'path_to_image3.jpg', // 替换为实际图片路径
          title: '品质女装 新款上新',
          views: 123500,
          description: '婵婵wang'
        },
        {
          id: 4,
          image: 'path_to_image4.jpg', // 替换为实际图片路径
          title: '高端品牌撤柜福利上新',
          views: 18394,
          description: '芙蓉裳轻奢品牌折扣'
        },
        {
          id: 5,
          image: 'path_to_image5.jpg', // 替换为实际图片路径
          title: '欢乐继续',
          views: 4556,
          description: '布能说的SECRET'
        },
        {
          id: 6,
          image: 'path_to_image6.jpg', // 替换为实际图片路径
          title: '正在直播中',
          views: 2142,
          description: '二宝文玩杂项回血'
        }
      ]
    };
  }
};
</script>

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  width: 300px;
}

.product-image {
  width: 100%;
  height: auto;
}

.product-info {
  padding: 10px;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
}

.product-views {
  color: #888;
  margin-top: 5px;
}

.product-description {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
}
</style>